import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Select, InputNumber } from 'antd';
import React from 'react';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import { TableListItem } from '../data';
import * as DataHelper from '@/helpers/DataHelper';
export interface FormValueType extends Partial<TableListItem> {
  key?: number;
  id?: number;
  dict_id?: number;
  item_value?: number;
  name?: string;
  nickname?: string;
  remark?: string;
  is_enable?: any;
  disabled?: boolean;
  updated_at?: string;
  created_at?: string;
}

export interface UpdateFormProps extends FormComponentProps {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => void;
  updateModalVisible: boolean;
  itemUpdataModalVisible: boolean;
  values: Partial<TableListItem>;
  otherValues?: any;
}
const FormItem = Form.Item;
const { TextArea } = Input;

export interface UpdateFormState {
  formVals: FormValueType;
  currentStep: number;
}

const UpdateForm: React.FC<UpdateFormProps> = props => {

    const { updateModalVisible, itemUpdataModalVisible, onSubmit: handleUpdate, onCancel, values, form, otherValues } = props;

    const okHandle = () => {
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        // form.resetFields();
        fieldsValue.id = values.id;
        handleUpdate(fieldsValue);
      });
    };

    console.log('values --->', values);

    return (
      <div>
      {updateModalVisible &&
      <Modal
        destroyOnClose
        title="编辑字典"
        visible={updateModalVisible}
        onOk={okHandle}
        onCancel={() => onCancel()}
      >
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="字典名称">
          {form.getFieldDecorator('name', {
            initialValue: values.name || '',
            rules: [{ required: true, message: '请输入字典名称'}],
          })(<Input placeholder="字典名称" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="字典编号">
          {form.getFieldDecorator('nickname', {
            initialValue: values.nickname || '',
            rules: [{ required: true, message: '请输入字典编号'}],
          })(<Input placeholder="字典编号" />)}
        </FormItem>
        <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
          {form.getFieldDecorator('remark', {
            initialValue: values.remark || '',
            rules: [{ }],
          })(<Input placeholder="描述" />)}
        </FormItem>
      </Modal>
      }
      { itemUpdataModalVisible && 
      <Modal
      destroyOnClose
      title="编辑字典值"
      width={DataHelper.DEFAULT_MODAL_WIDTH}
      visible={itemUpdataModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="值名称">
        {form.getFieldDecorator('name', {
          initialValue: values.name || '',
          rules: [{ required: true, message: '请输入值名称'}],
        })(<Input placeholder="值名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="值标识">
        {form.getFieldDecorator('nickname', {
          initialValue: values.nickname || '',
          rules: [{ required: true, message: '请输入字典编号'}],
        })(<Input placeholder="数据值标识" disabled={values.nickname?true:false}/>)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="数据值">
        {form.getFieldDecorator('item_value', {
          initialValue: values.item_value || '',
          rules: [{ required: itemUpdataModalVisible ? true : false, message: '请输入数据值'}],
        })(<Input placeholder="数据值" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="对比值">
        {form.getFieldDecorator('dict_item_value', {
          initialValue: values.dict_item_value || '',
          rules: [{ required: false, message: '请输入对比值'}],
        })(<Input placeholder="对比值" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
        {form.getFieldDecorator('remark', {
          initialValue: values.remark || '',
          rules: [{ }],
        })(<Input placeholder="描述" />)}
      </FormItem>
    </Modal>
    }
      </div>
    );

}

export default Form.create<UpdateFormProps>()(UpdateForm);
